<template>
	<view class="shop-item" >
		<view class="shop-hd flex row-between">
			<router-link
			    :to="{
					path: '/pages/store_detail/store_detail?id',
					query: { name: item.name, title: item.name, id: item.id }
				}"
			                        
			                    >
		        <view class="flex content flex row-between">	
						<view class="logo">
							<image class="img" :src="item.logo" />
						</view>        
					<view class="center">
						<view class="title">{{item.name}}</view>
						<view class="m-t-20">
							<u-rate v-model="item.score" disabled></u-rate>
						</view>
						<view class="address m-t-10">
						    <u-icon name="home"></u-icon> {{item.address}}
						</view>
						<view class="address m-t-10">
						    <u-icon name="map"></u-icon>{{item.distance}}
						</view>
						<view class="m-t-10">
							<u-tag :text="item.level" type="success" mode="dark" />
							<span  class="m-l-10"><u-tag text="可自提" type="error" /></span>
							<span  class="m-l-10"><u-tag text="营业中" type="warning"/></span>
						</view>
					</view>
		            <!-- <view class="right">
		            	<view class="store-status xs m-t-10 m-l-20">
		            	   
		            	</view>
						<view class="store-tag xs m-t-10 m-l-20">
						   
						</view>
		            </view> -->
		        </view>
			</router-link>
		</view>
	</view>
</template>

<script>
	import { menuJump, copy } from '@/utils/tools'
	export default {
		name: "shop-item",
		props: {
			item: {
				type: Object,
				defalut: () => ({})
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.shop-item {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		border-radius: 20rpx;
		background-color: #fff;
		.shop-hd {
			  display: flex;
			  margin-bottom: 10px;
			  padding: 10px;
			  border-radius: 10px;
			  background-color: #fff;
			  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
			.content{
				flex: 1;
				.logo{
					width: 220rpx;
					height: 220rpx;
					.img{
						border-radius: 8px;
						max-width:100%;
						max-height: 100%;
						object-fit: contain;
					}
				}
				.center{
                     height: 220rpx;
					 padding-left: 20rpx;
					.title{
						  font-size: 28rpx;
						  font-weight: bold;
						  margin: 0;
						  width: 300rpx;
						  white-space: nowrap;
						  overflow: hidden;
						  text-overflow: ellipsis;
					}
                    .address{
						  color: #9b9b9b;
						  font-size: 24rpx;
						  margin-top: 3px;
						  width: 380rpx; /* 设置一个固定宽度 */
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							// letter-spacing: 0.5px;
					}
				}
			}
			.right{
				display: flex;
				height: 200rpx;
				overflow: hidden;
				padding: 20rpx;
				// text-align: center;
				justify-content: space-between;
				flex-direction: column;
				
				.store-status{
					color: #19be6b;
				}
				.store-map{
					width: 60px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			

		}

	}
	
</style>
